import { DeleteOutlined } from '@ant-design/icons'
import { Card, Table, Tag, Modal } from 'antd'
import React, { useEffect, useState } from 'react'
import TableToolbar from '../../../../components/TableSetting/TableToolbar'
import AddDevices from './AddDevices'



const data = [{}]
export default function DevicesTable() {

    const [columnsKey, setcolumnsKey] = useState<any[]>([])

    const [realColumns, setrealColumns] = useState<any[]>([])


    //列
    const columns = [{
        title: "设备名称",
        dataIndex: "devName",
        key: "devName"
    }, {
        title: "设备ID",
        dataIndex: "deviceID",
        key: "deviceID"
    }, {
        title: "设备地址描述",
        dataIndex: "devDes",
        key: "devDes"
    }, {
        title: "设备所属机构",
        dataIndex: "devDept",
        key: "devDept"
    }, {
        title: "操作",
        key: "operation",
        render: (record: any) => <Tag color="#f50" icon={<DeleteOutlined />} className='delete'>删除</Tag>
    }]


    //当列设置改变的时候
    function onColumnsChange(checkedList: any[]) {
        // console.log(checkedList)
        setcolumnsKey(checkedList)
    }


    //监听变化
    useEffect(() => {
        const realColumns = columns.filter(item => columnsKey.indexOf(item.key) !== -1)
        setrealColumns(realColumns)
    }, [columnsKey])

    //点击刷新的操作
    function onRefresh() {

    }


    //点击新增的操作
    function onAdd() {

    }



    return (
        <div>
            <Card>
                <TableToolbar tableName="设备管理表" columns={columns} onColumnsChange={onColumnsChange} onRefresh={onRefresh} onAdd={onAdd} />
                <Table columns={realColumns} dataSource={data} />
            </Card>

            <Modal visible title="新增设备">
                <AddDevices />
            </Modal>
        </div>
    )
}
